<template>
  <Drawer
    v-model:visible="insideShow"
    :title="insideTitle"
    :width="props.width"
    :closable="true"
    destroyOnClose
    :zIndex="20"
    :footer-style="{ textAlign: 'right' }"
    :style="{ position: 'absolute' }"
    :get-container="drawerContainer"
    @close="onClose"
  >
    <slot></slot>

    <template #footer>
      <slot name="footerBtn"></slot>
      <a-button style="margin-right: 18px" @click="onClose">取消</a-button>
      <a-button type="primary" @click.prevent="onSubmit">提交</a-button>
    </template>
  </Drawer>
</template>
<script lang="ts" name="PageWrapDrawer" setup>
import {computed, ref, watch,} from 'vue';
import {Drawer,} from 'ant-design-vue';

const emit = defineEmits(['success', 'on-drawer-close'])
const props = defineProps({
    show: Boolean,
    isUpdate: Boolean,
    title: String,
    width: {type: String, default: '60%'},
})
const insideTitle = computed(() => {
  let result = props.isUpdate ? '编辑' : '新增';
  if (props.title) result = props.title;
  return result;
})

const insideShow = ref(false)
watch(() => props.show, async (v1, _) => {
  insideShow.value = v1
})

const onSubmit = () => {
  emit('success')
}

const drawerContainer = ():any => {
  // let containers = document.getElementsByClassName('vben-layout-content full')
  let containers = document.getElementsByClassName('vben-page-wrapper')
  if (containers.length > 0) {
    return containers[0]
  } else {
    let body = document.getElementsByTagName('body')
    return body[0]
  }
}

const onClose = () => {
  emit('on-drawer-close');
};

</script>
